<%--
  Created by IntelliJ IDEA.
  User: Mankind
  Date: 2017/7/14
  Time: 19:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String userName = request.getParameter("userName"); %>
<%@ tagliburi="http://shiro.apache.org/tags" prefix="shiro" %>
<!DOCTYPE html>
<html>
<head>
    <title>SSM练手项目</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="${path}/css/main.css">
    <link href="${path}/css/bootstrap.min.css" rel="stylesheet">
    <link href="${path}/css/font-awesome.min.css" rel="stylesheet">
    <link href="${path}/css/simple-line-icons.css" rel="stylesheet">
    <link rel="${path}/stylesheet" href="css/login.css">
    <link rel="stylesheet" href="${path}/css/manager.css">
    <link rel="stylesheet" href="${path}/css/personal-message.css">
    <link href="${path}/css/multiple-select.css" rel="stylesheet"/>
    <link rel="stylesheet" href="${path}/css/fileinput.min.css">
    <link rel="stylesheet" href="${path}/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" type="text/css" href="${path}/css/xcConfirm.css"/>
    <link rel="stylesheet" href="${path}/css/bootstrapValidator.min.css">
</head>
<body id="body">
<header class="app-header navbar" id="header">
    <a class="navbar-brand" href="#"></a>
    <ul class="nav navbar-nav hidden-md-down">
        <shiro:hasPermission name="正常通道">  
        <li class="nav-item px-1">
            <a type="button" class="nav-link" href="main.html">超级管理员通道</a>
        </li>
        </shiro:hasPermission>
        <shiro:hasPermission name="VIP1通道">  
        <li class="nav-item px-1">
            <a class="nav-link" href="blog.html">管理员通道</a>
        </li>
        </shiro:hasPermission>  
        <shiro:hasPermission name="VIP2通道">  
        <li class="nav-item px-1">
            <a class="nav-link" href="#" name="randomGo">教师通道</a>
        </li>
        </shiro:hasPermission>  
    </ul>
    <ul class="nav navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link navbar-toggler aside-menu-toggler" href="/logout.action">退出系统</a> 
            <!-- <button id="reset" type="button" class="btn btn-primary btn-default">退出系统</button> -->
        </li>
    </ul>
</header>
<div class="container" id="content-wrap">
    <div class="row clearfix" id="content">
        <div class="col-md-2 column "  id="content-left">
            <div class="panel-group" id="panel-800988">
                <shiro:hasAnyRoles name='超级管理员,管理员,教师'>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a class="panel-title" data-toggle="collapse" data-parent="#panel-800988" href="#panel-element-1">用户管理</a>
                    </div>
                    <div id="panel-element-1" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <ul>
                                <li>
                                    <a href="#" class="1" name="message">用户信息</a>
                                </li>
                                <li>
                                    <a href="#" class="2" name="role">分配角色</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                </shiro:hasAnyRoles>
                <shiro:hasAnyRoles name='超级管理员'>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a class="panel-title" data-toggle="collapse" data-parent="#panel-800988" href="#panel-element-2">角色管理</a>
                    </div>
                    <div id="panel-element-2" class="panel-collapse collapse ">
                        <div class="panel-body">
                            <ul>
                                <li>
                                    <a href="#" class="1" name="">角色信息</a>
                                </li>
                                <li>
                                    <a href="#" class="2" name="">分配权利</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                </shiro:hasAnyRoles>
                <shiro:hasAnyRoles name='超级管理员'>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a class="panel-title" data-toggle="collapse" data-parent="#panel-800988" href="#panel-element-3">权限管理</a>
                    </div>
                    <div id="panel-element-3" class="panel-collapse collapse ">
                        <div class="panel-body">
                            <ul>
                                <li>
                                    <a href="#" class="1" name="">权限信息</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                </shiro:hasAnyRoles>
            </div>
        </div>
        <div class="col-md-10 column " id="content-right">
            <div class="tabbable" id="tabs-948784">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#panel-1" data-toggle="tab"  name="message">用户信息</a>
                    </li>
                    <shiro:lacksRole name='教师'>
                    <li>
                        <a href="#panel-2" data-toggle="tab"  name="role">角色分配</a>
                    </li>
                    </shiro:lacksRole>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="panel-1">
                        <div class="right-body">
                            <div class="row">
                                <div class="col-md-4  column search-bar" >
                                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" id="create-user-btn">添加用户</button>
                                </div>
                                <div class="col-md-8 col-md-push-3 column search-bar" >
                                    <form >
                                        <div class="col-md-3 ">
                                            <input type="text"  class="form-control "  placeholder="请输入查找昵称:" name="text" id="text-1" >
                                        </div>
                                        <button name="search-1" type="button" class="btn btn-primary btn-sm search">开始查找</button>
                                        <button name="reset-1" type="button" class="btn btn-primary btn-sm">重置条件</button>
                                    </form>
                                </div>
                                <div class="col-md-12 column">
                                    <table id="first-table" class="table table-striped " style="table-layout:fixed">  
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="text-center">
                            <ul id="first-paginator"></ul>
                        </div>
                    </div>
                    <div class="tab-pane" id="panel-2">
                        <div class="right-body">
                            <div class="row clearfix">
                                <div class="col-md-4  column search-bar" >
                                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">添加用户</button>
                                </div>
                                <div class="col-md-8 col-md-push-3 column search-bar" >
                                    <form >
                                        <div class="col-md-3 ">
                                            <input type="text"  class="form-control "  placeholder="请输入查找昵称:" name="text" id="text-2" >
                                        </div>
                                        <button name="search-2" type="button" class="btn btn-primary btn-sm search">开始查找</button>
                                        <button name="reset-2" type="button" class="btn btn-primary btn-sm">重置条件</button>
                                    </form>
                                </div>
                                <div class="col-md-12 column">
                                    <table id="second-table" class="table table-striped " style="table-layout:fixed">
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="text-center">
                            <ul id="second-paginator"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
                                        <!--新建用户模态框-->
                                        <div name="create-user" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                        <h4 class="modal-title" id="myModalLabel">添加新用户</h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form action="user/register" class="form-horizontal" id="create-form" method="post">
                                                            <div class="row form-group">
                                                                <label for="account" class="control-label col-md-4">账&ensp;号</label>
                                                                <div class="col-md-6">
                                                                    <input type="text"  class="form-control"  placeholder="账号" name="userAccount" id="account">
                                                                </div>
                                                            </div>
                                                            <div class="row form-group">
                                                                <label  class="control-label col-md-4">密&ensp;码</label>
                                                                <div class="col-md-6">
                                                                    <input type="password"  class="form-control"  placeholder="请输入密码" name="userPassword" >
                                                                </div>
                                                            </div>
                                                            <div class="row form-group">
                                                                <label  class="control-label col-md-4">确认密码</label>
                                                                <div class="col-md-6">
                                                                    <input type="password"  class="form-control"  placeholder="请再次输入密码" name="confirmPassword">
                                                                </div>
                                                            </div>
                                                            <div class="row form-group">
                                                                <label class="control-label col-md-4">昵&ensp;称</label>
                                                                <div class="col-md-6">
                                                                    <input type="text"  class="form-control"  placeholder="请输入昵称" name="userName" >
                                                                </div>
                                                            </div>
                                                            <div class="row form-group ">
                                                                <div class="col-md-12">
                                                                    <label  class="control-label col-md-4">性&ensp;别</label>
                                                                    <div class="col-md-6">
                                                                        <label class="radio-inline">
                                                                            <input type="radio" name="sex" id="male" value="male"> 男
                                                                        </label>
                                                                        <label class="radio-inline">
                                                                            <input type="radio" name="sex" id="female" value="female"> 女
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row form-group " id="datetimepicker">
                                                                <label  class="control-label col-md-4">生&ensp;日</label>
                                                                <div class="col-md-6">
                                                                    <input type="text"  class="form-control form_date"    id="userBirthday" name="userBirthday" placeholder="点击选择生日">
                                                                </div>
                                                            </div>
                                                            <div class="row form-group">
                                                                <label for="job" class="control-label col-md-4">职&ensp;位</label>
                                                                <div class="col-md-6">
                                                                    <input type="text"  class="form-control"  placeholder="job" id="job" name="job">
                                                                </div>
                                                            </div>
                                                            <div class="row form-group">
                                                                <label  class="control-label col-md-4">邮&emsp;箱</label>
                                                                <div class="col-md-6">
                                                                    <input type="text"  class="form-control"  placeholder="email" name="email" >
                                                                </div>
                                                            </div>
                                                            <div class="row form-group">
                                                                <label class="control-label col-md-4">微&emsp;信</label>
                                                                <div class="col-md-6">
                                                                    <input type="text"  class="form-control"  placeholder="wechat" name="wechat" >
                                                                </div>
                                                            </div>
                                                            <div class="row form-group">
                                                                <label class="control-label col-md-4">联系方式</label>
                                                                <div class="col-md-6">
                                                                    <input type="text"  class="form-control"  placeholder="tel" name="telephone">
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                                        <button type="button" class="btn btn-primary" id="create-btn" >创建用户</button>
                                                    </div>
                                                </div><!-- /.modal-content -->
                                            </div><!-- /.modal -->
                                        </div>
                                         <!-- 查看详情模态框 -->
                                        <div name="detail-modal" class="modal fade" id="detail-modal-" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                        <h4 class="modal-title" id="myModalLabel2">用户详情</h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form class="form-horizontal">
                                                            <div class="row form-group">
                                                                <label for="account" class="control-label col-md-4">账&ensp;号</label>
                                                                <div class="col-md-6">
                                                                    <span type="text"  class="form-control"  placeholder="账号" name="userAccount" id="account">
                                                                </div>
                                                            </div>
                                                            <div class="row form-group">
                                                                <label class="control-label col-md-4">昵&ensp;称</label>
                                                                <div class="col-md-6">
                                                                    <span type="text"  class="form-control"  placeholder="请输入昵称" name="userName" >
                                                                </div>
                                                            </div>
                                                            <div class="row form-group ">
                                                                <label  class="control-label col-md-4">性&ensp;别</label>
                                                                 <div class="col-md-6">
                                                                    <span type="text"  class="form-control"  placeholder="性别" name="sex" id="sex">
                                                                 </div>
                                                            </div>
                                                            <div class="row form-group " id="datetimepicker">
                                                                <label  class="control-label col-md-4">生&ensp;日</label>
                                                                <div class="col-md-6">
                                                                    <span type="text"  class="form-control"  id="userBirthday" name="userBirthday">
                                                                </div>
                                                            </div>
                                                            <div class="row form-group">
                                                                <label for="job" class="control-label col-md-4">职&ensp;位</label>
                                                                <div class="col-md-6">
                                                                    <span type="text"  class="form-control"  placeholder="job" id="job" name="job">
                                                                </div>
                                                            </div>
                                                            <div class="row form-group">
                                                                <label  class="control-label col-md-4">邮&emsp;箱</label>
                                                                <div class="col-md-6">
                                                                    <span type="text"  class="form-control"  placeholder="email" name="email" >
                                                                </div>
                                                            </div>
                                                            <div class="row form-group">
                                                                <label class="control-label col-md-4">微&emsp;信</label>
                                                                <div class="col-md-6">
                                                                    <span type="text"  class="form-control"  placeholder="wechat" name="wechat" >
                                                                </div>
                                                            </div>
                                                            <div class="row form-group">
                                                                <label class="control-label col-md-4">联系方式</label>
                                                                <div class="col-md-6">
                                                                    <span type="text"  class="form-control"  placeholder="tel" name="telephone" >
                                                                </div>
                                                            </div>
                                                        </form> 
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                    </div>
                                                </div><!-- /.modal-content-->
                                            </div><!-- /.modal -->
                                        </div> 
                                        <!--编辑用户模态框-->
                                        <div name="update-modal" class="modal fade" id="update-modal-" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                        <h4 class="modal-title" id="myModalLabel3">编辑用户</h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form action="user/register" class="form-horizontal" id="update-form" method="post">
                                                            <div class="row form-group">
                                                                <label for="account" class="control-label col-md-4">账&ensp;号</label>
                                                                <div class="col-md-6">
                                                                    <input type="text"  class="form-control"  placeholder="账号" name="userAccount" id="account" disabled>
                                                                </div>
                                                            </div>
                                                            <div class="row form-group">
                                                                <label  class="control-label col-md-4">密&ensp;码</label>
                                                                <div class="col-md-6">
                                                                    <input type="password"  class="form-control"  placeholder="请输入密码" name="userPassword" >
                                                                </div>
                                                            </div>
                                                            <div class="row form-group">
                                                                <label  class="control-label col-md-4">确认密码</label>
                                                                <div class="col-md-6">
                                                                    <input type="password"  class="form-control"  placeholder="请再次输入密码" name="confirmPassword">
                                                                </div>
                                                            </div>
                                                            <div class="row form-group">
                                                                <label class="control-label col-md-4">昵&ensp;称</label>
                                                                <div class="col-md-6">
                                                                    <input type="text"  class="form-control"  placeholder="请输入昵称" name="userName" >
                                                                </div>
                                                            </div>
                                                            <div class="row form-group ">
                                                                <div class="col-md-12">
                                                                    <label  class="control-label col-md-4">性&ensp;别</label>
                                                                    <div class="col-md-6">
                                                                        <label class="radio-inline">
                                                                            <input type="radio" name="sex" id="male" value="male"> 男
                                                                        </label>
                                                                        <label class="radio-inline">
                                                                            <input type="radio" name="sex" id="female" value="female"> 女
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row form-group " id="datetimepicker">
                                                                <label  class="control-label col-md-4">生&ensp;日</label>
                                                                <div class="col-md-6">
                                                                    <input type="text"  class="form-control form_date"    id="userBirthday" name="userBirthday">
                                                                </div>
                                                            </div>
                                                            <div class="row form-group">
                                                                <label for="job" class="control-label col-md-4">职&ensp;位</label>
                                                                <div class="col-md-6">
                                                                    <input type="text"  class="form-control"  placeholder="job" id="job" name="job">
                                                                </div>
                                                            </div>
                                                            <div class="row form-group">
                                                                <label  class="control-label col-md-4">邮&emsp;箱</label>
                                                                <div class="col-md-6">
                                                                    <input type="text"  class="form-control"  placeholder="email" name="email" >
                                                                </div>
                                                            </div>
                                                            <div class="row form-group">
                                                                <label class="control-label col-md-4">微&emsp;信</label>
                                                                <div class="col-md-6">
                                                                    <input type="text"  class="form-control"  placeholder="wechat" name="wechat" >
                                                                </div>
                                                            </div>
                                                            <div class="row form-group">
                                                                <label class="control-label col-md-4">联系方式</label>
                                                                <div class="col-md-6">
                                                                    <input type="text"  class="form-control"  placeholder="tel" name="telephone" >
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                        <button type="button" class="btn btn-primary" id="update-submit" data-dismiss="modal" >提交更改</button>
                                                    </div>
                                                </div><!-- /.modal-content -->
                                            </div><!-- /.modal -->
                                        </div>
                                        <!--修改成功提示-->
                                         <div  class="modal fade" id="update-success" tabindex="-1" role="dialog" aria-labelledby="myModalLabel4" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                        <h4 class="modal-title" id="myModalLabel4">操作成功</h4>
                                                    </div>
                                                    <div class="modal-body text-center">
                                                        <span>您已经成功修改该用户信息！</span>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-dismiss="modal" id="update-success-btn">关闭</button>
                                                    </div>
                                                </div><!-- /.modal-content -->
                                            </div><!-- /.modal -->
                                        </div>
                                        <!--添加成功提示-->
                                         <div  class="modal fade" id="create-success" tabindex="-1" role="dialog" aria-labelledby="myModalLabel5" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                        <h4 class="modal-title" id="myModalLabel5">操作成功</h4>
                                                    </div>
                                                    <div class="modal-body text-center">
                                                        <span>您已经成功添加一名用户!</span>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-dismiss="modal" id="create-success-btn">关闭</button>
                                                    </div>
                                                </div><!-- /.modal-content -->
                                            </div><!-- /.modal -->
                                        </div>
                                        <!--删除成功提示-->
                                         <div  class="modal fade" id="delete-success" tabindex="-1" role="dialog" aria-labelledby="myModalLabel7" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                        <h4 class="modal-title" id="myModalLabel7">操作成功</h4>
                                                    </div>
                                                    <div class="modal-body text-center">
                                                        <span>您已经成功删除一名用户!</span>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-dismiss="modal" id="delete-success-btn">关闭</button>
                                                    </div>
                                                </div><!-- /.modal-content -->
                                            </div><!-- /.modal -->
                                        </div>
                                        <!--删除提示-->
                                         <div name="delete-modal" class="modal fade" id="delete-modal-" tabindex="-1" role="dialog" aria-labelledby="myModalLabel6" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                        <h4 class="modal-title" id="myModalLabel6"></h4>
                                                    </div>
                                                    <div class="modal-body text-center">
                                                        <span>是否确认删除该用户？</span>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                        <button type="button" class="btn btn-primary" id="delete-confirm-btn" data-dismiss="modal">确认</button>
                                                    </div>
                                                </div><!-- /.modal-content -->
                                            </div><!-- /.modal -->
                                        </div>
<script>

</script>
<script src="${path}/js/jquery-3.0.0.min.js"></script>
<script src="${path}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${path}/js/bootstrap-paginator.js"></script>
<script type="text/javascript" src="${path}/js/fileinput.min.js"></script>
<script src="${path}/js/multiple-select.js"></script>
<script type="text/javascript" src="${path}/js/fileinput_locale_zh.js"></script>
<script src="${path}/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="${path}/js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
<script src="${path}/js/distpicker.data.min.js"></script>
<script src="${path}/js/distpicker.min.js"></script>
<script src="${path}/js/back.js"></script>
<script src="${path}/js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>
<script src="${path}/js/bootstrapValidator.min.js"></script>
<script src="${path}/js/language/zh_CN.js"></script>
<script type='text/javascript'>
    $("#create-user-btn").click(function(){
        $("div[name='create-user']").find("input").val("");
    })
    //添加用户验证
    $('#create-form').bootstrapValidator({
            message: 'This value is not valid',
            fields:{
                userAccount:{
                    validators:{
                        notEmpty:{
                            message: '账号不能为空'
                        },
                        remote:{
                            url:'/user/accountCheck',
                            message: '用户已存在',
                            delay :  5000,
                            type: 'POST',
                            dataType: 'json'
                        }
                    }
                },
                userPassword:{
                    validators:{
                        notEmpty:{
                            message: '密码不能为空'
                        }
                    }
                },
                confirmPassword:{
                    validators:{
                        notEmpty:{
                            message: '密码不能为空'
                        },
                        identical:{
                            field:'userPassword',
                            message:'前后密码不一致'
                        }
                    }
                },
                userName:{
                    validators:{
                        notEmpty:{
                            message: '用户名不能为空'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\. \u4e00-\u9fa5 ]+$/,
                            message: '用户名只能由字母、数字、点、下划线和汉字组成'
                        }
                    }
                },
                userBirthday:{
                    validators:{    
                        regexp: {
                            regexp: /^(19|20)\d{2}-(1[0-2]|0?[1-9])-(0?[1-9]|[1-2][0-9]|3[0-1])$/,
                            message: '请以XXXX-XX-XX格式输入正确生日'
                        }
                    }
                },
                job:{
                    validators:{
                        regexp: {
                            regexp: /^[\u4e00-\u9fa5]{0,}$/,
                            message: '请以中文输入您的职业'
                        }
                    }
                },
                email:{
                    validators:{
                        emailAddress:{
                            message:'请输入合法的邮箱格式'
                        }
                    }
                },
                wechat:{

                },
                telephone:{
                    validators:{
                        regexp: {
                            regexp: /^[1][0-9]{10}$/,
                            message: '请输入正确的手机格式'
                        }
                    }
                }
            }
        }).on('success.form.bv', function(e){
            //e.preventDefault();
        });
    //编辑表单验证
    $('#update-form').bootstrapValidator({
            message: 'This value is not valid',
            fields:{
                userPassword:{
                    validators:{
                        notEmpty:{
                            message: '密码不能为空'
                        }
                    }
                },
                confirmPassword:{
                    validators:{
                        notEmpty:{
                            message: '密码不能为空'
                        },
                        identical:{
                            field:'userPassword',
                            message:'前后密码不一致'
                        }
                    }
                },
                userName:{
                    validators:{
                        notEmpty:{
                            message: '用户名不能为空'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\. \u4e00-\u9fa5 ]+$/,
                            message: '用户名只能由字母、数字、点、下划线和汉字组成'
                        }
                    }
                },
                userBirthday:{
                    validators:{    
                        regexp: {
                            regexp: /^(19|20)\d{2}-(1[0-2]|0?[1-9])-(0?[1-9]|[1-2][0-9]|3[0-1])$/,
                            message: '请以XXXX-XX-XX格式输入正确生日'
                        }
                    }
                },
                job:{
                    validators:{
                        regexp: {
                            regexp: /^[\u4e00-\u9fa5]{0,}$/,
                            message: '请以中文输入您的职业'
                        }
                    }
                },
                email:{
                    validators:{
                        emailAddress:{
                            message:'请输入合法的邮箱格式'
                        }
                    }
                },
                wechat:{

                },
                telephone:{
                    validators:{
                        regexp: {
                            regexp: /^[1][0-9]{10}$/,
                            message: '请输入正确的手机格式'
                        }
                    }
                }
            }
        }).on('success.form.bv', function(e){
            //e.preventDefault();
        });
    $("button[name^='search']").click(function(){
        var id=$(this).attr('name').split("-")[1];
        if(id=="1")
        {
            $("a[name='message']").click();
        }
        else if(id=="2")
        {
             $("a[name='role']").click();
        }
    })
    $("button[name^='reset']").click(function(){
        var id=$(this).attr('name').split("-")[1];
         if(id=="1")
         {
            $("#text-1").val("");
            $("a[name='message']").click();
         }
         else if(id=="2")
        {
            $("#text-2").val("");
             $("a[name='role']").click();
        }
    })
    $("#update-submit").click(function(){
            var id=$("div[name='update-modal']").attr("id").split("-")[2];  
            $.ajax({
              type: "POST",
              url:'/user/updateUserInfo?id='+id,
              data:$("#update-form").serialize(),
              daaType:"json",
              success:function(){
                $("#update-success").modal("show"); 
                }
            })
    })
    $("#delete-confirm-btn").click(function(){
        var $modal=$("div[name='delete-modal']");  
        var id=$modal.attr("id").split("-")[2];
         $.ajax({
            type: "POST",
            url:'/user/deleteUserInfo?id='+id,
            success:function(){
                $("#delete-success").modal("show");
            }   
        })
     })
    $("#create-btn").click(function(){
        $('#create-form').bootstrapValidator('validate');
        var bootstrapValidator = $("#create-form").data('bootstrapValidator');
        if(bootstrapValidator.isValid())
        {
             bootstrapValidator.resetForm();
            $.ajax({
                type:"POST", 
                url:"/user/createUser",
                data:$("#create-form").serialize(),
                success:function(){
                    $('div[name="create-user"]').modal('toggle');
                    $("#create-success").modal("show");
                }
            })    
        }
    })
    $("#create-success-btn").click(function(){
        $("a[name='message']").click();
    })
    $("#update-success-btn").click(function(){
        $("a[name='message']").click();
    })
    $("#delete-success-btn").click(function(){
        $("a[name='message']").click();
    })
    $('.form_date').datetimepicker({
        //language:  'fr',
        format: 'yyyy-mm-dd',
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });
    function getLocalTime(nS) {     
       return new Date(parseInt(nS)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");      
    }     
    function getBitrthdayLocalTime(nS) {     
       var date= new Date(parseInt(nS)).toLocaleString().split(' ')[0];
       var arr = date.split("/");
       if(arr.length==3)
       {
        if(arr[1].length==1) arr[1]="0"+arr[1];
       if(arr[2].length==1) arr[2]='0'+arr[2];
       return arr[0]+"-"+arr[1]+"-"+arr[2];     
       }
       return null;
        
    }                   
    function getUserInfoTotalPages(){
        $.ajax({
            type:"POST",
            dataType:"json",
            url:'/user/getUserInfoTotalPages?text='+$("#text-1").val(),
            success:function(data){
                if(data.totalPages!=0)
                {
                    var options = {
                        currentPage: 1,
                        totalPages: data.totalPages,
                        numberOfPages:8,
                        bootstrapMajorVersion:3,
                        useBootstrapTooltip:true,
                        itemTexts:function(type,page, current){//文字翻译
                            switch (type) {
                                case "first":
                                    return "首页";
                                case "prev":
                                    return "上一页";
                                case "next":
                                    return "下一页";
                                case "last":
                                    return "尾页";
                                case "page":
                                    return page;
                            }
                        },
                        onPageClicked: function (event, originalEvent, type, page){
                            $.ajax({
                                type: "POST",
                                dataType:"json",
                                url:'/user/getUserInfoByPage?Page='+page+'&text='+$("#text-1").val(),//点击分页提交当前页码
                                success:function(data){
                                    var list = data.userInfoList;
                                    //DOM操作
                                    $("#first-table").empty();
                                    var head='<colgroup><col style="width:10%"><col style="width:12%"><col style="width:12%"><col style="width:20%"><col style="width:20%"><col style="wdith:36%"></colgroup><thead><tr><th>用户</th><th>电话</th><th>微信</th><th>邮箱</th><th>最近登录时间</th><th>操作</th></tr></thead><tbody>';
                                    $("#first-table").append(head);
                                    if (list.length != 0){
                                        for(var i=0;i<list.length;i++){
                                            var html =
                                                '<tr>'+//
                                                '<td>'+//
                                                '<span name="userName-'+list[i].userId+'">'+list[i].userName+'</span>'+//
                                                '</td>'+
                                                '<td>'+//
                                                '<span name="telephone-'+list[i].userId+'">'+list[i].telephone+'</span>'+//
                                                '</td>'+//
                                                '<td>'+//
                                                '<span name="wechat-'+list[i].userId+'">'+list[i].wechat+'</span>'+//
                                                '</td>'+//
                                                '<td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">'+//
                                                '<span name="email-'+list[i].userId+'">'+list[i].email+'</span>'+//
                                                '</td>'+//
                                                '<td>'+//
                                                getLocalTime(list[i].recentlyTime)+//
                                                '</td>'+//
                                                '<td>'+//
                                                 '<button type="button" class='+//
                                                '"btn btn-primary btn-sm " name="detail-'+list[i].userId+'" data-toggle="modal" data-target="#detail-modal-'+list[i].userId+'">详情'+//
                                                '</button>'+////按钮！！！！！
                                                 '<button type="button" class='+//
                                                '"btn btn-success btn-sm " name="update-'+list[i].userId+'" data-toggle="modal" data-target="#update-modal-'+list[i].userId+'">编辑'+//
                                                '</button>';
                                                if(list[i].userId!=1)
                                                {
                                                    html+='<button type="button" class='+//
                                                '"btn btn-danger btn-sm" name="delete-'+list[i].userId+'" data-toggle="modal" data-target="#delete-modal-'+list[i].userId+'">删除'+//
                                                '</button>';////按钮！！！！！
                                                }
                                                html+='</td>'+'</tr>';
                                            $("#first-table").append(html);

                                        }
                                    }
                                    else{
                                        $("#first-table").append('暂无数据！！！');
                                    }
                                    var tail='</tbody>';
                                    $("#first-table").append(tail);
                                    //添加JS功能-编辑
                                    $("button[name^='update-']").click(function(){
                                        var id=$(this).attr("name").split("-")[1];
                                        var $modal=$("div[name='update-modal']");  
                                        $modal.attr("id","update-modal-"+id);
                                        $.ajax({
                                            type:"POST",
                                            url:"/user/loadUserInfo?id="+id,
                                            success:function(data){
                                                 var userInfo=data.userInfo;
                                                 var user=data.user;
                                                 $modal.find("input[name='userAccount']").val(user.userAccount);
                                                 $modal.find("input[name='userPassword']").val(user.userPassword);
                                                 $modal.find("input[name='confirmPassword']").val(user.userPassword);
                                                 $modal.find("input[name='userName']").val(userInfo.userName);
                                                 if(userInfo.sex=="male")
                                                 {
                                                    $modal.find("input[name='sex']:nth(0)").attr("checked",true);
                                                 }
                                                 else 
                                                 {
                                                    $modal.find("input[name='sex']:nth(1)").attr("checked",true);
                                                 }
                                                 if(userInfo.userBirthday!=null||userInfo.userBirthday!="")
                                                 {
                                                    $modal.find("input[name='userBirthday']").val(getBitrthdayLocalTime(userInfo.userBirthday));
                                                 }
                                                 $modal.find("input[name='job']").val(userInfo.job);
                                                 $modal.find("input[name='email']").val(userInfo.email);
                                                 $modal.find("input[name='wechat']").val(userInfo.wechat);
                                                 $modal.find("input[name='telephone']").val(userInfo.telephone);
                                            }
                                         })
                                    })
                                    //添加js删除逻辑
                                    $("button[name^='delete-']").click(function(){
                                        var id=$(this).attr("name").split("-")[1];
                                        var $modal=$("div[name='delete-modal']");
                                        $modal.attr("id","delete-modal-"+id);
                                    })
                                    //添加js查看详情逻辑
                                    $("button[name^='detail-']").click(function(){
                                         var id=$(this).attr("name").split("-")[1];
                                         var $modal=$("div[name='detail-modal']");  
                                         $modal.attr("id","detail-modal-"+id);
                                         $.ajax({
                                            type:"POST",
                                            url:"/user/loadUserInfo?id="+id,
                                            success:function(data){
                                                 var userInfo=data.userInfo;
                                                 var user=data.user;
                                                 $modal.find("span[name='userAccount']").text(user.userAccount);
                                                 $modal.find("span[name='userName']").text(userInfo.userName);
                                                 $modal.find("input[name='userPassword']").val(user.userPassword);
                                                 $modal.find("input[name='confirmPassword']").val(user.userPassword);
                                                 var sex;
                                                 if(userInfo.sex=="male")
                                                 {
                                                    sex="男";
                                                 }else if(userInfo.sex=="female")
                                                 {
                                                    sex="女";
                                                 }else 
                                                 {
                                                    sex="";
                                                 }
                                                 $modal.find("span[name='sex']").text(sex)      ;
                                                 if(userInfo.userBirthday!=null||userInfo.userBirthday!="")
                                                 {
                                                    $modal.find("span[name='userBirthday']").text(getBitrthdayLocalTime(userInfo.userBirthday));
                                                }
                                                 $modal.find("span[name='job']").text(userInfo.job);
                                                 $modal.find("span[name='email']").text(userInfo.email);
                                                 $modal.find("span[name='wechat']").text(userInfo.wechat);
                                                 $modal.find("span[name='telephone']").text(userInfo.telephone);
                                            }
                                         })
                                         
                                    })
                                }
                                //success end;
                            })
                        }
                    }
                    $('#first-paginator').bootstrapPaginator(options);
                    $($('#first-paginator').children().get(0)).children().click();
                }
                else
                {
                    $("#first-table").empty();
                    var head=' <thead><tr><th>用户</th><th>性别</th><th>电话</th><th>微信</th><th>邮箱</th><th>职业</th><th>最近登录时间</th><th>操作</th></tr></thead><tbody>';
                    $("#first-table").append(head);
                    $("#first-paginator").empty();
                }
            }
        })
    } 
    function getUserInfoAndRoleTotalPages(){
        $.ajax({
            type:"POST",
            dataType:"json",
            url:'/user/getUserInfoTotalPages?text='+$("#text-2").val(),
            success:function(data){
                if(data.totalPages!=0)
                {
                    var options = {
                        currentPage: 1,
                        totalPages: data.totalPages,
                        numberOfPages:8,
                        bootstrapMajorVersion:3,
                        useBootstrapTooltip:true,
                        itemTexts:function(type,page, current){//文字翻译
                            switch (type) {
                                case "first":
                                    return "首页";
                                case "prev":
                                    return "上一页";
                                case "next":
                                    return "下一页";
                                case "last":
                                    return "尾页";
                                case "page":
                                    return page;
                            }
                        },
                        onPageClicked: function (event, originalEvent, type, page){
                            $.ajax({
                                type: "POST",
                                dataType:"json",
                                url:'/user/getUserInfoAndRoleByPage?Page='+page+'&text='+$("#text-2").val(), //点击分页提交当前页码
                                success:function(data){
                                    var list = data.userInfoList;
                                    var roleList=data.roleListOfUser;
                                    var allRole=data.allRole;
                                    //DOM操作
                                    $("#second-table").empty();
                                    var head='<colgroup><col style="width:10%"><col style="width:20%"><col style="width:30%"><col style="width:15%"></colgroup><thead><tr><th>用户</th><th>拥有角色</th><th>分配角色</th><th></th></tr></thead><tbody>';
                                    $("#second-table").append(head);
                                    if (list.length != 0){
                                        for(var i=0;i<list.length;i++){
                                            var roleNameList="";
                                            for(var j=0;j<roleList[i].length;j++){
                                                roleNameList+=roleList[i][j].roleName;
                                                if(j!=roleList[i].length-1)
                                                roleNameList+=",";
                                            }
                                            var html ='<tr>'+//
                                                '<td>'+//
                                                list[i].userName+//
                                                '</td>'+//
                                                '<td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">'+//
                                                roleNameList+//
                                                '</td>'+//
                                                '<td>'+//
                                                '<form id="form-'+list[i].userId+'"><select style="min-width:20rem;" class="ms" multiple="multiple" name="roleName" id="multiple-role-'+list[i].userId+'"></select></form>'+//
                                                '</td>'+//
                                                '<td>'+//
                                                //按钮！！！！！
                                                '<button type="button" class='+//
                                                '"btn btn-primary btn-sm" name="allocation-'+list[i].userId+'">保存分配'+//
                                                '</button>'+////按钮！！！！！
                                                '</td>'+//
                                                '</tr>';//
                                            $("#second-table").append(html);
                                            //添加所有角色
                                            for(var j=0;j<allRole.length;j++)
                                            {
                                                html='<option value="'+allRole[j].roleId+'">'+allRole[j].roleName+'</option>';
                                                $("#multiple-role-"+list[i].userId).append(html);
                                            }

                                            //植入已有的角色
                                            var arr=[];
                                            if(roleList[i].length!=0)
                                            {
                                                for(var j=0;j<roleList[i].length;j++)
                                                {
                                                    if(roleList[i][j].roleId!=1)
                                                    arr.push(roleList[i][j].roleId);
                                                }
                                                $("#multiple-role-"+list[i].userId).val(arr);   
                                            //     //
                                            }
                                              $("#multiple-role-"+list[i].userId).multipleSelect('refresh');  
                                            
                                            
                                        }
                                    }
                                    else{
                                        $("#second-table").append('暂无数据！！！');
                                    }
                                    var tail='</tbody>';
                                    $("#second-table").append(tail);
                                    //添加js分配角色功能
                                    $("button[name^='allocation-']").click(function(){
                                        var id=$(this).attr("name").split("-")[1];
                                        $.ajax({
                                         type: "POST",
                                         url: '/user/roleAssign?id='+id,
                                         data: $("#form-"+id).serialize(),
                                         success:function(){
                                                $("a[name='role']").click();
                                            }                                        
                                        })
                                    })
                                }
                                //success end;
                            })
                        }
                    }
                    $('#second-paginator').bootstrapPaginator(options);
                    $($('#second-paginator').children().get(0)).children().click();
                }
                else
                {
                    $("#second-table").empty();
                    var head='<colgroup><col style="width:10%"><col style="width:60%"><col style="width:20%"></colgroup><thead><tr><th>用户</th><th>拥有角色</th><th>分配角色</th></tr></thead><tbody>';
                    $("#second-table").append(head);
                    $("#second-paginator").empty();
                }
            }
        })
    }   
    $(function(){
        $("a[name='message']").click(getUserInfoTotalPages);
        $("a[name='role']").click(getUserInfoAndRoleTotalPages);
        $("a[name='message']").click();
        $('select').multipleSelect('refresh');
    });

</script>
</body>
</html>